<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow Example</title>
    <link rel="stylesheet" href="css/styles.css">
    </head>
<body>
    <div class="container">
        <div class="box overflow-visible">
            Overflow Visible: This content will overflow the box and be visible outside of it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="box overflow-hidden">
            Overflow Hidden: This content will be clipped and not visible outside of the box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="box overflow-scroll">
            Overflow Scroll: This content will have a scrollbar if it overflows the box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="box overflow-auto">
            Overflow Auto: This content will show a scrollbar only when necessary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</body>
</html>